<template>
  <view class="container">
    <view class="header">
      <text class="title">医院财务系统</text>
    </view>

    <!-- 患者信息 -->
    <view class="section">
      <text class="section-title">患者信息</text>
      <view class="patient-info">
        <text>姓名: {{ patient.name }}</text>
        <text>病历号: {{ patient.id }}</text>
        <text>就诊日期: {{ patient.visitDate }}</text>
      </view>
    </view>

    <!-- 费用明细 -->
    <view class="section">
      <text class="section-title">费用明细</text>
      <view class="billing-table">
        <view class="table-row header">
          <text class="table-cell">项目</text>
          <text class="table-cell">数量</text>
          <text class="table-cell">单价 (元)</text>
          <text class="table-cell">总价 (元)</text>
        </view>
        <view class="table-row" v-for="(item, index) in billingItems" :key="index">
          <text class="table-cell">{{ item.name }}</text>
          <text class="table-cell">{{ item.quantity }}</text>
          <text class="table-cell">{{ item.price }}</text>
          <text class="table-cell">{{ item.total }}</text>
        </view>
      </view>
    </view>

    <!-- 总费用 -->
    <view class="section">
      <text class="section-title">总费用</text>
      <view class="total-amount">
        <text>总计: {{ totalAmount }} 元</text>
      </view>
    </view>

    <!-- 支付按钮 -->
    <view class="payment-actions">
      <button class="pay-button" @click="handlePayment">支付</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 患者信息
const patient = ref({
  name: '张三',
  id: '123456',
  visitDate: '2023-10-01',
});

// 费用明细
const billingItems = ref([
  { name: '挂号费', quantity: 1, price: 50, total: 50 },
  { name: '检查费', quantity: 2, price: 100, total: 200 },
  { name: '药费', quantity: 3, price: 30, total: 90 },
]);

// 计算总费用
const totalAmount = computed(() => {
  return billingItems.value.reduce((sum, item) => sum + item.total, 0);
});

// 支付功能
const handlePayment = () => {
  uni.showModal({
    title: '支付确认',
    content: `确认支付 ${totalAmount.value} 元吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '支付成功',
          icon: 'success',
        });
      }
    },
  });
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.patient-info {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.patient-info text {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.billing-table {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-row {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.table-row.header {
  font-weight: bold;
  background-color: #f5f5f5;
}

.table-cell {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #333;
}

.total-amount {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.payment-actions {
  margin-top: 20px;
}

.pay-button {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16px;
}

.pay-button:active {
  background-color: #218838;
}
</style>